﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title style="height: 500px">朋友圈动态</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/myStrategyComment.css"/>
    <link rel="stylesheet" href="/css/app.css">
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <link rel="stylesheet" href="/js/jqueryAlert/common.css">
    <script src="/js/jquery/jquery.min.js" type="text/javascript"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/jqueryAlert/alertPopShow.js"></script>
    <script src="/js/plugins/form/jquery.form.js"></script>


    <style type="text/css">
        * {
            cursor: pointer;
        }

        .weui_mask_transition {
            display: none;
            position: fixed;
            z-index: 1;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0);
            -webkit-transition: background .3s;
            transition: background .3s;
        }

        .weui_fade_toggle {
            background: rgba(0, 0, 0, 0.6);
        }

        .weui_actionsheet {
            position: fixed;
            left: 0;
            bottom: 0;
            -webkit-transform: translate(0, 100%);
            -ms-transform: translate(0, 100%);
            transform: translate(0, 100%);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            z-index: 2;
            width: 100%;
            background-color: #EFEFF4;
            -webkit-transition: -webkit-transform .3s;
            transition: transform .3s;
        }

        .weui_actionsheet_toggle {
            -webkit-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
            transform: translate(0, 0);
        }

        .weui_actionsheet_menu {
            background-color: #FFFFFF;
        }

        .weui_actionsheet_cell:before {
            content: " ";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 1px;
            border-top: 1px solid #D9D9D9;
            -webkit-transform-origin: 0 0;
            -ms-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: scaleY(0.5);
            -ms-transform: scaleY(0.5);
            transform: scaleY(0.5);
        }

        .weui_actionsheet_cell:first-child:before {
            display: none;
        }

        .weui_actionsheet_cell {
            position: relative;
            padding: 10px 0;
            text-align: center;
            font-size: 18px;
        }

        .weui_actionsheet_cell.title {
            color: #999;
        }

        .weui_actionsheet_action {
            margin-top: 6px;
            background-color: #FFFFFF;
        }

    </style>

    <script>
        //朋友圈id
        var fid = null;
        //评论id
        var userCommentId = null;
        var beReplyUserName = null;
        //克隆内容
        var commentModelClone = null;
        var replyModelClone = null;


        $(function () {
            //右上角头像
            var user = JSON.parse(sessionStorage.getItem("user"));
            $("#avt").attr("src", user.headImgUrl);
            //名字
            $("#user-name").html(user.nickName);
            //背景
            $("#bg").attr("src", user.coverImgUrl)

            //页面
            $.get("/friendships", function (data) {
                $("#list").renderValues(data, {
                    getHref: function (item, value) {
                        var href = $(item).data("href");
                        $(item).prop("href", href + value);
                    },
                    getJson: function (item, value) {
                        if (value) {
                            var json = JSON.parse(value);
                            $(item).attr("data-json", JSON.stringify(json));
                        }
                    },
                    getFId: function (item, value) {
                        if (value) {
                            $(item).attr("data-fid", value)
                        }
                    },
                    getId: function (item, value) {
                        $(item).attr("id", "cmt-list" + value);
                    },
                    getCommentId: function (item, value) {
                        $(item).attr("id", "reply" + value)
                    },
                    getGoodName: function (item, value) {
                        if (value) {
                            var json = JSON.parse(value)
                            $(item).html(json.userName + "&nbsp;&nbsp;")
                            var href = $(item).data("href")
                            $(item).attr("href", href + json.userId);
                        }
                    },
                    isGood: function (item, value) {
                        if (value) {
                            var json = JSON.parse(value)
                            if (json.isGood) {
                                console.log(1);
                                $(item).html('取消赞' + '<i class="fa fa-heart-o" aria-hidden="true"></i>');
                            }
                            $(item).attr("data-json", JSON.stringify(json));
                        }

                    },getGoodId:function (item,value) {
                        $(item).attr("id","goodIdXX"+value)
                    }


                });

                //点赞按钮
                $(".isGood").click(function () {
                    var thisGood = $(this)
                    var isGood = $(this).data("isgood")
                    var json = $(this).data("json");
                    console.log(json);
                    $.get("/friendships/" + json.friendshipId + "/praise", function (data) {
                        if (data) {
                            $.ajax({
                                type: "delete",
                                url: '/friendships/' + json.friendshipId + "/praise",
                                success: function (data) {
                                    thisGood.html('赞' + '<i class="fa fa-heart-o" aria-hidden="true"></i>')
                                    thisGood.attr("data-isgood", "false")

                                    var removeGood=$("#goodIdXX" + json.friendshipId + " a");
                                    console.log($(removeGood[1]).html());
                                    console.log(user.nickName);
                                    for(var i=0;i<removeGood.length;i++){
                                        if ($(removeGood[i]).html() == user.nickName+"&nbsp;&nbsp;") {
                                            $(removeGood[i]).remove();

                                        }
                                    }

                                }
                            })
                        } else {
                            $.post('/friendships/' + json.friendshipId + "/praise", {"bepraiseuser.id": json.bepraiseuserId}, function (data) {
                                if (data.success) {
                                    thisGood.html('取消赞' + '<i class="fa fa-heart-o" aria-hidden="true"></i>')
                                    thisGood.attr("data-isgood", "true")
                                    var goodModel = $("#goodModel a").clone(true);
                                    console.log(goodModel);
                                    goodModel.html(user.nickName+"&nbsp;&nbsp;");
                                    goodModel.attr("href", '/userProfiles.html?id=' + user.id);
                                    $("#goodIdXX"+json.friendshipId).append(goodModel);
                                }
                            })

                        }
                    })

                })

                //评论按钮
                $(".userComment").click(function () {
                    var dataJson = $(this).data("json");
                    fid = $(this).data("fid")
                    $("#commentForm input[name=content]").val("");
                    if (dataJson) {
                        $("#commentForm input[name='bereplyuser.id']").val(dataJson.beReplyUserId);
                        userCommentId = dataJson.userCommentId
                        beReplyUserName = dataJson.beReplyUserName;
                        $("#commentForm").attr("action", "/friendshipComments/" + userCommentId + "/friendshipReplys")
                    }
                    if (fid) {
                        $("#commentForm").attr("action", "/friendships/" + fid + "/comments")
                    }
                    $("#CommentModal").modal("show");
                });

                //提交按钮
                $(".submitBtn").click(function () {
                    var commentContent = $("#commentForm input[name=content]").val();
                    var replyContent = $("#commentForm input[name=content]").val();
                    $("#commentForm").ajaxSubmit(function (data) {
                        if (data.success) {
                            if (fid) {
                                commentModelClone = $("#commentModel .cmt-list").clone(true);
                                commentModelClone.find(".appendContent").html(commentContent)
                                // $("#commentModel .appendContent").html(commentContent);
                                commentModelClone.find(".commentName").html(user.nickName)
                                //$("#commentModel .commentName").html(user.nickName);
                                commentModelClone.find(".userAppendComment").attr("data-json", data.comment.json)
                                //$("#commentModel .userAppendComment").attr("data-json",data.comment.json);
                                userCommentId = data.comment.id
                                commentModelClone.find(".xxxx").attr("id", "reply" + userCommentId)
                                // $("#commentModel .userAppendReply").attr("id","reply"+userCommentId);
                                $("#cmt-list" + fid).append(commentModelClone);
                                $('#CommentModal').modal('hide');
                            } else if (userCommentId) {
                                $("#replyModel .replyUserName").html(user.nickName);
                                $("#replyModel .bereplyUserName").html(beReplyUserName);
                                $("#replyModel .replyContent").html(replyContent)
                                if (data.comment) {
                                    $("#replyModel .userReplyComment").attr("data-json", data.comment.json)
                                }
                                if (data.reply) {
                                    $("#replyModel .userReplyComment").attr("data-json", data.reply.json)
                                }
                                replyModelClone = $("#replyModel .cloneReply").clone(true);
                                console.log(replyModelClone);
                                console.log($("#reply" + userCommentId));
                                $("#reply" + userCommentId).append(replyModelClone);
                                $('#CommentModal').modal('hide');

                            }

                        }
                        console.log(commentModelClone);
                    })
                });

                console.log(commentModelClone);
                console.log(fid);

                //给图片绑定点击事件 lituan
                $(".comment-img li img").click(function () {
                    var img = $(this).attr("src");
                    $(document).dialog({
                        overlayClose: true,
                        titleShow: false,
                        content: '<img class="info-icon" width="100%" src="' + img + '"/>'
                    });

                })


            });

            $("#editFriendship").click(function () {
                location.href = "/mine/addDynamic.html";
            })

        })

    </script>
</head>
<body>
<!--点赞模板-->
<div id="goodModel">
    <a class="goodModel">
    </a>
</div>

<!--评论模板-->
<div id="commentModel" style="display: none">
    <div>
        <div class="cmt-list">
            <div>
                <div class="userAppendReply">
                    <p class="userAppendComment userComment">
                        <span class="cun commentName" render-html="list.friendshipComments.user.nickName"></span>
                        <span>:</span>
                        <span class="commentContent appendContent" render-html="list.friendshipComments.content"></span>
                    </p>
                </div>
            </div>
            <!--二级评论-->
            <div class="xxxx">

            </div>
        </div>
    </div>
</div>
<!--回复模板-->
<div id="replyModel" style="display: none">
    <div class="cloneReply">
        <p class="userComment userReplyComment">
            &nbsp;&nbsp;&nbsp;
            <span class="replyUserName"
                  render-html="list.friendshipComments.friendshipReplies.user.nickName"></span>
            回复<span class="bereplyUserName"
                    render-html="list.friendshipComments.friendshipReplies.bereplyuser.nickName"></span>
            <span>：</span>
            <span class="commentContent replyContent"
                  render-html="list.friendshipComments.friendshipReplies.content"> </span>
        </p>
    </div>
</div>


<script>

</script>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div id="outerdiv"
                 style="position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.7); z-index: 2; width: 100%; height: 100%; display: none;">
                <div id="innerdiv" style="margin:auto;width: 800px; height: 800px;margin-top:33%;">
                    <img id="bigimg" style="border: 5px solid #fff; margin: 0 auto;width: 366px; height: 400px; "
                         src=""/>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:window.history.go(-1)">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
            <span>我的朋友圈</span>
        </div>
        <div class="col" align="right">
            <i id="editFriendship" class="fa fa-camera" aria-hidden="true"></i>

        </div>
    </div>
</div>

<header>
    <img id="bg">
    <p id="user-name" class="data-name"></p>

    <img id="avt" class="data-avt">
</header>
<div id="main">
    <div id="list">
        <ul>
            <div render-loop="list">
                <li>
                    <div class="po-avt-wrap">
                        <!--头像-->
                        <a data-href="/userProfiles.html?id=" render-key="list.user.id" render-fun="getHref">
                            <img class="po-avt data-avt" render-src="list.user.headImgUrl">
                        </a>
                    </div>
                    <div class="po-cmt">
                        <div class="po-hd">
                            <a data-href="/userProfiles.html?id=" render-key="list.user.id" render-fun="getHref">
                                <span class="data-name"   render-html="list.user.nickName"></span>
                            </a>
                            <div class="post">
                                <p render-html="list.content"></p>

                                <ul class="comment-img" render-loop="list.imgArr">
                                    <li>
                                        <img class="list-img" render-src="list.imgArr.self"
                                        >
                                    </li>
                                </ul>
                            </div>
                            <!--发布朋友圈的时间-->
                            <p class="time" render-html="list.createTime"></p>
                            <!--评论按钮-->
                            <a class="userComment" render-key="list.id" render-fun="getFId">
                                <img class="c-icon" src="/img/c.png">
                            </a>
                        </div>
                        <div class="r"></div>
                        <div class="cmt-wrap">
                            <div class="like">
                                <p class="userGood"><!--点赞按钮-->
                                <p data-isgood="false" render-key="list.json" render-fun="isGood" class="isGood">
                                    赞<i class="fa fa-heart-o" aria-hidden="true"></i>
                                </p>
                                </p>
                                <div render-loop="list.friendshipPraises" class="goodClass"
                                    render-key="list.id" render-fun="getGoodId">
                                    <a data-href="/userProfiles.html?id=" class="thumb"
                                       render-key="list.friendshipPraises.json" render-fun="getGoodName">
                                    </a>

                                </div>


                            </div>
                            <!--评论-->
                            <div render-loop="list.friendshipComments" render-key="list.id" render-fun="getId">
                                <div>
                                    <div class="cmt-list">
                                        <div>
                                            <p class="userComment" render-key="list.friendshipComments.json"
                                               render-fun="getJson">
                                                <span class="cun"
                                                      render-html="list.friendshipComments.user.nickName"></span>
                                                <span>:</span>
                                                <span class="commentContent"
                                                      render-html="list.friendshipComments.content"></span>
                                            </p>
                                        </div>
                                        <!--二级评论-->
                                        <div render-loop="list.friendshipComments.friendshipReplies"
                                             render-key="list.friendshipComments.id" render-fun="getCommentId">
                                            <p class="userComment"
                                               render-key="list.friendshipComments.friendshipReplies.json"
                                               render-fun="getJson">
                                                &nbsp;&nbsp;&nbsp;
                                                <span class="data-name"
                                                      render-html="list.friendshipComments.friendshipReplies.user.nickName"></span>
                                                回复<span
                                                    render-html="list.friendshipComments.friendshipReplies.bereplyuser.nickName"></span>
                                                <span>：</span>
                                                <span class="commentContent"
                                                      render-html="list.friendshipComments.friendshipReplies.content"> </span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </div>
        </ul>
    </div>
</div>


<!--评论模态框-->
<div class="modal fade" id="CommentModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">评论</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="" method="post" id="commentForm">
                    <!--<input type="hidden" name="friendship.id"/>--><!--评论的朋友圈id-->
                    <input type="hidden" name="bereplyuser.id"/><!--被评论人的id-->
                    <!--<input type="hidden" name="friendshipcomment.id"/>--><!--一级评论的id-->
                    <div class="form-group">
                        <label class="col-sm-4 control-label">评论内容：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="content"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary submitBtn">评论</button>
            </div>
        </div>
    </div>
</div>


</body>
</html>